<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发者抉择 - 职业道德互动游戏</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* padding: 20px; */
            color: #333;
            line-height: 1.6;
        }
        
        #game-container {
            width: 100%;
            max-width: 900px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 95vh;
        }
        
        #header {
            background: var(--secondary-color);
            color: white;
            padding: 15px 20px;
            text-align: center;
            position: relative;
        }
        
        #header h1 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        
        #header p {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        #game-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        #scene-container {
            flex: 3;
            display: flex;
            flex-direction: column;
        }
        
        #scene-image {
            height: 300px;
            background-size: cover;
            background-position: center;
            transition: background-image 0.5s ease;
            position: relative;
            overflow: hidden;
            flex: 3;
        }
        
        #scene-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
        }
        
        #character-container {
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            /* padding: 20px; */
            z-index: 1;
        }
        
        .character {
            width: 120px;
            height: 180px; /* aaa */
            background-size: 500px auto;
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: -75px;
            transition: all 0.3s ease;
            position: relative;
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
        }
        
        .character:hover {
            transform: translateY(-10px);
        }
        
        .character-name {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            white-space: nowrap;
        }
        
        #dialog-container {
            flex: 5;
            display: flex;
            flex-direction: column;
            padding: 20px;
            background: var(--light-color);
            overflow: hidden;
        }
        
        #dialog-text {
            flex: 1;
            font-size: 1.1rem;
            margin-bottom: 20px;
            line-height: 1.7;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        #options-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .option-btn {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            background: var(--primary-color);
            color: white;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: left;
            position: relative;
            overflow: hidden;
        }
        
        .option-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .option-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .option-btn:hover::after {
            transform: translateX(0);
        }
        
        .option-btn.good {
            background: var(--success-color);
        }
        
        .option-btn.good:hover {
            background: #27ae60;
        }
        
        .option-btn.bad {
            background: var(--danger-color);
        }
        
        .option-btn.bad:hover {
            background: #c0392b;
        }
        
        .option-btn.neutral {
            background: var(--warning-color);
        }
        
        .option-btn.neutral:hover {
            background: #d35400;
        }
        
        #stats-container {
            flex: 1;
            padding: 20px;
            background: white;
            border-left: 1px solid #eee;
            display: flex;
            flex-direction: column;
            min-width: 250px;
        }
        
        .stat-item {
            margin-bottom: 15px;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        
        .stat-bar {
            height: 10px;
            background: #ecf0f1;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .stat-fill {
            height: 100%;
            border-radius: 5px;
            transition: width 0.5s ease;
        }
        
        .moral-fill {
            background: var(--success-color);
        }
        
        .health-fill {
            background: var(--primary-color);
        }
        
        .reputation-fill {
            background: var(--warning-color);
        }
        
        .career-fill {
            background: var(--secondary-color);
        }
        
        #inventory-container {
            margin-top: 20px;
            border-top: 1px dashed #ddd;
            padding-top: 20px;
        }
        
        #inventory-title {
            font-size: 1rem;
            margin-bottom: 10px;
            color: var(--dark-color);
        }
        
        #inventory-items {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .inventory-item {
            width: 40px;
            height: 40px;
            background: #f5f5f5;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            cursor: help;
            position: relative;
        }
        
        .inventory-item:hover {
            background: #e0e0e0;
        }
        
        .item-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            white-space: nowrap;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 10;
        }
        
        .inventory-item:hover .item-tooltip {
            visibility: visible;
            opacity: 1;
        }
        
        #feedback-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }
        
        #feedback-modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        #feedback-content {
            background: white;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            padding: 30px;
            position: relative;
            transform: translateY(20px);
            transition: transform 0.3s;
        }
        
        #feedback-modal.active #feedback-content {
            transform: translateY(0);
        }
        
        #feedback-text {
            font-size: 1.1rem;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        #feedback-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #7f8c8d;
        }
        
        #theory-popup {
            background: rgba(255, 255, 255, 0.9);
            border-left: 5px solid var(--secondary-color);
            padding: 15px;
            margin-top: 15px;
            border-radius: 0 5px 5px 0;
            font-size: 0.9rem;
            color: var(--dark-color);
        }
        
        .theory-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--secondary-color);
        }
        
        @media (max-width: 768px) {
            #game-content {
                flex-direction: column;
            }
            
            #stats-container {
                border-left: none;
                border-top: 1px solid #eee;
                min-width: auto;
            }
            
            #scene-image {
                height: 200px;
            }
            
            .character {
                width: 80px;
                height: 120px;
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="header">
            <h1>开发者抉择</h1>

            <p>职业道德互动体验游戏</p>
        </div>
        
        <div id="game-content">
            <div id="scene-container">
                <div id="scene-image">
                    <div id="character-container">
                        <!-- 角色将通过JavaScript动态添加 -->
                    </div>
                </div>
                
                <div id="dialog-container">
                    <div id="dialog-text">
                        欢迎来到《开发者抉择》！你将扮演一名游戏开发新人，面对职场中的各种道德抉择。你的每个决定都会影响你的职业生涯和人生轨迹...
                    </div>
                    
                    <div id="options-container">
                        <button class="option-btn" onclick="nextScene(1)">开始游戏</button>
                    </div>
                </div>
            </div>
            
            <div id="stats-container">
                <div class="stat-item">
                    <div class="stat-label">
                        <span>道德值</span>
                        <span id="moral-value">100</span>
                    </div>
                    <div class="stat-bar">
                        <div class="stat-fill moral-fill" id="moral-bar" style="width: 100%"></div>
                    </div>
                </div>
                
                <div class="stat-item">
                    <div class="stat-label">
                        <span>健康状况</span>
                        <span id="health-value">100</span>
                    </div>
                    <div class="stat-bar">
                        <div class="stat-fill health-fill" id="health-bar" style="width: 100%"></div>
                    </div>
                </div>
                
                <div class="stat-item">
                    <div class="stat-label">
                        <span>行业声誉</span>
                        <span id="reputation-value">100</span>
                    </div>
                    <div class="stat-bar">
                        <div class="stat-fill reputation-fill" id="reputation-bar" style="width: 100%"></div>
                    </div>
                </div>
                
                <div class="stat-item">
                    <div class="stat-label">
                        <span>职业发展</span>
                        <span id="career-value">50</span>
                    </div>
                    <div class="stat-bar">
                        <div class="stat-fill career-fill" id="career-bar" style="width: 50%"></div>
                    </div>
                </div>
                
                <div id="inventory-container">
                    <div id="inventory-title">📦 获得的证书</div>
                    <div id="inventory-items">
                        <!-- 物品将通过JavaScript动态添加 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="feedback-modal">
        <div id="feedback-content">
            <button id="feedback-close" onclick="closeFeedback()">×</button>
            <div id="feedback-text"></div>
            <button class="option-btn" onclick="closeFeedback()" style="width: 100%">继续</button>
        </div>
    </div>
    
    <audio id="bgm" loop>
        <source src="asset/audio/bgm.mp3" type="audio/mpeg">
    </audio>
    
    <audio id="click-sound">
        <source src="asset/audio/click-sound.mp3" type="audio/mpeg">
    </audio>
    
    <audio id="positive-sound">
        <source src="asset/audio/positive-sound.mp3" type="audio/mpeg">
    </audio>
    
    <audio id="negative-sound">
        <source src="asset/audio/negative-sound.mp3" type="audio/mpeg">
    </audio>

    <script>
        // 游戏状态
        const gameState = {
            moral: 100,
            health: 100,
            reputation: 100,
            career: 50,
            inventory: [],
            currentScene: 0,
            visitedScenes: [],
            flags: {}
        };
        
        const items = {
            "ethics-cert": {
                "icon": "📜",
                "name": "职业道德证书"
            },
            "whistleblower-cert": {
                "icon": "🛡️",
                "name": "举报保护证明"
            },
            "integrity-cert": {
                "icon": "🏆",
                "name": "廉洁自律奖状"
            }
        }

        // 游戏数据
        const scenes = [
            { // 场景0：开始
                id: 0,
                background: "asset/picture/background/0.jpg",
                characters: [],
                text: "<p>欢迎来到《开发者抉择》！你将扮演一名游戏开发新人，面对职场中的各种道德抉择。你的每个决定都会影响你的职业生涯和人生轨迹...</p>",
                options: [
                    {text: "开始游戏", next: 1, class: "", onclick() { bgm.play(); }}
                ],
                theory: null
            },
            { // 场景1：入职第一天
                id: 1,
                background: 'asset/picture/background/1.jpg',
                characters: [
                    { name: "你", image: "asset/picture/character/you.png" },
                    { name: "HR张经理", image: "asset/picture/character/HR.png" }
                ],
                text: "<p>今天是你的入职第一天，HR张经理带你熟悉公司环境。她提到公司最近在赶一个重要项目，可能需要加班。</p>",
                options: [
                    { text: "表示愿意随时加班", next: 2, moral: 0, health: -50, reputation: 0, career: 25, class: "bad", feedback: "HR赞赏你的态度，但长期加班使你的健康状况急剧下降" },
                    { text: "询问加班补偿政策", next: 2, moral: 0, health: -33, reputation: 0, career: 10, class: "neutral", feedback: "HR解释了公司的加班补偿制度，你接受了加班" },
                    { text: "明确表示希望合理工作时间", next: 2, moral: 0, health: 0, reputation: 0, career: -25, class: "good", feedback: "HR表示理解，但提醒你项目紧急时可能需要配合" }
                ],
                theory: {
                    title: "职业道德：劳动权益",
                    content: "《劳动法》规定劳动者每日工作时间不超过8小时，加班需支付加班费。维护合理工作权益是职业道德的基础。"
                }
            },
            { // 场景2：项目会议
                id: 2,
                background: "asset/picture/background/2.png",
                characters: [
                    { name: "你", image: "asset/picture/character/you.png" },
                    { name: "王总监", image: "asset/picture/character/wang.png" },
                    { name: "同事小李", image: "asset/picture/character/xiaoli.png" }
                ],
                text: "<p>项目会议上，王总监提出要借鉴(抄袭)一款热门游戏的玩法机制，以缩短开发周期。同事小李悄悄告诉你这可能会侵权。</p>",
                options: [
                    { text: "支持抄袭方案", next: 3, moral: -66, health: 38, reputation: -50, career: 25, class: "bad", feedback: "项目进展迅速，且你节省了大量时间，但埋下了法律风险" },
                    { text: "建议修改借鉴", next: 3, moral: 0, health: 19, reputation: 0, career: 10, class: "neutral", feedback: "团队在借鉴基础上做了创新，且项目推进得比平时更快" },
                    { text: "坚决反对并指出风险", next: 3, moral: 45, health: 0, reputation: 30, career: -15, class: "good", feedback: "王总监不悦，但避免了潜在法律问题", item: "ethics-cert" }
                ],
                theory: {
                    title: "职业道德：知识产权",
                    content: "在创意产业蓬勃发展的当下，尊重知识产权绝对是不可撼动的基本准则。抄袭这类行为，从法律层面来讲，就是实实在在的违法之举，它是对原创者智慧结晶的公然盗窃，严重损害了创作者的心血与权益。从行业生态的角度而言，抄袭更是一种极具破坏性的毒瘤，它会让那些真正致力于创新创造的人心寒，打击了大家创新的积极性，使得整个行业的发展逐渐失去活力，陷入同质化、低质化的恶性循环，极大地损害了行业创新生态。"
                }
            },
            { // 场景3：用户数据
                id: 3,
                background: "asset/picture/background/3.png",
                characters: [
                    {name: "你", image: "asset/picture/character/you.png"},
                    {name: "市场部刘经理", image: "asset/picture/character/liu.png"}
                ],
                text: "<p>市场部刘经理要求你提供玩家的真实姓名和手机号，用于精准营销。你知道这违反了《个人信息保护法》。</p>",
                options: [
                    { text: "按要求提供数据", next: 4, moral: -66, health: 0, reputation: -50, career: 25, class: "bad", feedback: "营销效果显著，但三个月后公司因数据泄露被调查" },
                    { text: "提供匿名化数据", next: 4, moral: 0, health: 0, reputation: -25, career: 5, class: "neutral", feedback: "营销效果一般，但合规安全" },
                    { text: "拒绝并举报违规要求", next: 4, moral: 30, health: 0, reputation: 50, career: -25, class: "good", feedback: "公司高层震怒，但避免了重大法律风险", item: "whistleblower-cert" }
                ],
                theory: {
                    title: "职业道德：用户隐私",
                    content: "《个人信息保护法》规定处理个人信息应当取得个人同意。保护用户隐私是IT从业者的基本职业操守。"
                }
            },
            { // 场景4：年终考核
                id: 4,
                background: "asset/picture/background/4.png",
                characters: [
                    {name: "你", image: "asset/picture/character/you.png"},
                    {name: "王总监", image: "asset/picture/character/wang.png"}
                ],
                text: "<p>年终考核时，王总监暗示如果你能给他个人\"好处\"，可以给你更高的绩效评分。</p>",
                options: [
                    { text: "私下给总监送礼", next: 5, moral: -40, health: 0, reputation: 0, career: 50, class: "bad", feedback: "你获得了优秀员工，但内心不安" },
                    { text: "婉拒但保持沉默", next: 5, moral: 0, health: 0, reputation: 0, career: 0, class: "neutral", feedback: "你得到了普通评分" },
                    { text: "拒绝并向HR举报", next: 5, moral: 25, health: 0, reputation: 0, career: 10, class: "good", feedback: "总监被处分，同事为你感到解气", item: "integrity-cert" }
                ],
                theory: {
                    title: "职业道德：廉洁自律",
                    content: "“职业人员应保持廉洁自律，拒绝商业贿赂”是社会主义核心价值观中‘公正’‘法治’的实践要求，也是‘敬业’准则在职业活动中的具体体现。若需与个人层面价值观对应，更准确的表述是：廉洁自律是敬业精神的内在要求，而拒绝商业贿赂是维护社会公平（公正）和市场法治的必要举措。"
                }
            },
            { // 场景5：结局
                id: 5,
                background: function() {
                    if(gameState.moral >= 130) {
                        return "asset/picture/background/5_1.jpg";
                    } else if(gameState.moral >= 80) {
                        return "asset/picture/background/5_2.jpg";
                    } else if(gameState.moral >= 50) { 
                        return "asset/picture/background/5_3.png";
                    } else {
                        return "asset/picture/background/5_4.png";

                    }
                },
                characters: [
                ],
                // characters: function() {
                //     if(gameState.moral >= 120) {
                //         return [
                //             {name: "你", image: "asset/picture/character/you.png"},
                //             {name: "CEO", image: "https://img.icons8.com/color/96/000000/conference-call.png"}
                //         ];
                //     } else if(gameState.moral >= 80) {
                //         return [
                //             {name: "你", image: "asset/picture/character/you.png"},
                //             {name: "同事", image: "asset/picture/character/xiaoli.png"}
                //         ];
                //     } else {
                //         return [
                //             {name: "你", image: "asset/picture/character/you.png"},
                //             {name: "律师", image: "https://img.icons8.com/color/96/000000/lawyer.png"}
                //         ];
                //     }
                // },
                text: function() {
                    let text = "<p>一年过去了，你的职业道路走到了...</p>";
                    
                    if(gameState.moral >= 130) {
                        text += `
                            <p>★ 道德先锋 ★</p>
                            <p>你坚守职业道德，虽然短期发展较慢，但长期赢得了尊重。公司成立道德委员会，你被推举为负责人。</p>
                        `
                    } else if(gameState.moral >= 80) {
                        text += `
                            <p>普通从业者</p>
                            <p>你基本遵守职业规范，但偶尔妥协。职业生涯平稳发展，没有太大波澜。</p>
                        `
                    } else if(gameState.moral >= 50) {
                        text += `
                            <p>⚠️ 风险警示 ⚠️</p>
                            <p>你的多次违规行为导致公司面临调查，你被列入行业观察名单。</p>
                        `
                    } else {
                        text += `
                            <p>❌ 职业危机 ❌</p>
                            <p>你因严重违反职业道德被公司开除，面临法律诉讼，职业生涯陷入低谷。</p>
                        `
                    }
                    text += "<hr>"
                    text += `
                        <p>最终得分：</p>
                        <p>道德: ${gameState.moral}/200</p>
                        <p>健康: ${gameState.health}/100</p>
                        <p>声誉: ${gameState.reputation}/100</p>
                        <p>职业: ${gameState.career}/100</p>
                    `
                    text += "<hr>"
                    if(gameState.inventory.length > 0) {
                        text += "<p>获得的证书：</p>";
                        gameState.inventory.forEach(item => {
                           text += `<p>${items[item].name}</p>`;
                        })
                    }
                    
                    return text;
                },
                options: [
                    // {text: "重新开始", next: 0, class: ""}
                ],
                theory: function() {
                    if(gameState.moral >= 120) {
                        return {
                            title: "社会主义核心价值观",
                            content: "你的选择体现了'敬业'与'诚信'的价值观，这正是职业美德的体系。长期来看，道德坚守会带来真正的成功。"
                        };
                    } else {
                        return {
                            title: "职业道德反思",
                            content: "职业道德犹如一座坚固的基石，是职业生涯能够持续稳健发展的根基所在。它如同黑暗中的灯塔，为我们指引着前行的方向，让我们在复杂多变的职业环境中坚守正道，不偏不倚。一个具备高尚职业道德的人，不仅能够赢得他人的尊重和信任，还能够在职业生涯的长河中平稳航行，不断迈向新的高峰。"
                        };
                    }
                }
            }
        ];
        
        // 音频元素
        const bgm = document.getElementById("bgm");
        const clickSound = document.getElementById("click-sound");
        const positiveSound = document.getElementById("positive-sound");
        const negativeSound = document.getElementById("negative-sound");
        
        // 初始化游戏
        function initGame() {
            bgm.volume = 0.3;
            // bgm.play();
            updateStatsDisplay();
            renderScene(scenes[0]);
        }
        
        // 渲染场景
        function renderScene(scene) {
            gameState.currentScene = scene.id;
            
            // 设置背景
            const sceneImage = document.getElementById("scene-image");
            if(typeof scene.background === "function") {
                sceneImage.style.backgroundImage = `url(${scene.background()})`;
            } else {
                sceneImage.style.backgroundImage = `url(${scene.background})`;
            }
            
            // 清空角色
            const characterContainer = document.getElementById("character-container");
            characterContainer.innerHTML = "";
            
            // 添加角色
            let characters = scene.characters;
            if(typeof characters === "function") {
                characters = characters();
            }
            
            characters.forEach(char => {
                const charElement = document.createElement("div");
                charElement.className = "character";
                charElement.style.backgroundImage = `url(${char.image})`;
                
                const nameElement = document.createElement("div");
                nameElement.className = "character-name";
                nameElement.textContent = char.name;
                
                charElement.appendChild(nameElement);
                characterContainer.appendChild(charElement);
            });
            
            // 设置对话文本
            document.getElementById("dialog-text").innerHTML = typeof scene.text === "function" ? scene.text() : scene.text;
            
            // 清空选项
            const optionsContainer = document.getElementById("options-container");
            optionsContainer.innerHTML = "";
            
            // 添加选项
            scene.options.forEach(option => {
                const btn = document.createElement("button");
                btn.className = `option-btn ${option.class || ""}`;
                btn.textContent = option.text;
                btn.onclick = function() {
                    // playClickSound();
                    handleOption(option);
                };
                optionsContainer.appendChild(btn);
            });
            
            // 显示理论提示
            const theoryPopup = document.getElementById("theory-popup");
            if(theoryPopup) theoryPopup.remove();
            
            if(scene.theory) {
                const theory = typeof scene.theory === "function" ? scene.theory() : scene.theory;
                
                const theoryElement = document.createElement("div");
                theoryElement.id = "theory-popup";
                theoryElement.innerHTML = `
                    <div class="theory-title">${theory.title}</div>
                    <div>${theory.content}</div>
                `;
                
                document.getElementById("dialog-container").appendChild(theoryElement);
            }
        }
        
        // 处理选项选择
        function handleOption(option) {
            if (option.onclick) option.onclick(); // 触发自定义点击事件

            // 更新状态
            if(option.moral) gameState.moral += option.moral;
            if(option.health) gameState.health += option.health;
            if(option.reputation) gameState.reputation += option.reputation;
            if(option.career) gameState.career += option.career;
            
            // 限制范围
            gameState.moral = Math.max(0, Math.min(200, gameState.moral));
            gameState.health = Math.max(0, Math.min(100, gameState.health));
            gameState.reputation = Math.max(0, Math.min(100, gameState.reputation));
            gameState.career = Math.max(0, Math.min(100, gameState.career));
            
            // 添加物品
            if(option.item && !gameState.inventory.includes(option.item)) {
                gameState.inventory.push(option.item);
                updateInventory();
            }
            
            // 显示反馈
            if(option.feedback) {
                showFeedback(option.feedback);
            } else {
                nextScene(option.next);
            }
            
            // 更新状态显示
            updateStatsDisplay();
            
            // 播放音效
            if(option.moral > 0 || option.reputation > 0) {
                positiveSound.currentTime = 0;
                positiveSound.play();
            } else if(option.moral < 0 || option.reputation < 0) {
                negativeSound.currentTime = 0;
                negativeSound.play();
            } else {
                clickSound.currentTime = 0;
                clickSound.play();
            }
        }
        
        // 显示反馈弹窗
        function showFeedback(text) {
            document.getElementById("feedback-text").textContent = text;
            document.getElementById("feedback-modal").classList.add("active");
        }
        
        // 关闭反馈弹窗
        function closeFeedback() {
            document.getElementById("feedback-modal").classList.remove("active");
            const currentScene = scenes.find(s => s.id === gameState.currentScene);
            const selectedOption = currentScene.options.find(opt => opt.feedback);
            nextScene(selectedOption.next);
        }
        
        // 跳转到下一场景
        function nextScene(sceneId) {
            const nextScene = scenes.find(s => s.id === sceneId);
            if(nextScene) {
                renderScene(nextScene);
            }
        }
        
        // 更新状态显示
        function updateStatsDisplay() {
            document.getElementById("moral-value").textContent = gameState.moral;
            document.getElementById("health-value").textContent = gameState.health;
            document.getElementById("reputation-value").textContent = gameState.reputation;
            document.getElementById("career-value").textContent = gameState.career;
            
            document.getElementById("moral-bar").style.width = `${gameState.moral / 2}%`;
            document.getElementById("health-bar").style.width = `${gameState.health}%`;
            document.getElementById("reputation-bar").style.width = `${gameState.reputation}%`;
            document.getElementById("career-bar").style.width = `${gameState.career}%`;
        }
        
        // 更新物品栏
        function updateInventory() {
            const inventoryContainer = document.getElementById("inventory-items");
            inventoryContainer.innerHTML = "";
            
            gameState.inventory.forEach(item => {
                const itemElement = document.createElement("div");
                itemElement.className = "inventory-item";
                itemElement.textContent = items[item].icon || "📦";
                
                const tooltip = document.createElement("div");
                tooltip.className = "item-tooltip";
                tooltip.textContent = items[item].name || "未知物品";
                
                itemElement.appendChild(tooltip);
                inventoryContainer.appendChild(itemElement);
            });
        }
        
        // 播放点击音效
        function playClickSound() {
            clickSound.currentTime = 0;
            clickSound.play();
        }
        
        // 启动游戏
        window.onload = initGame;
    </script>
</body>
</html>